<template>
  <view class="page">
    <!-- 标题栏  start-->
	<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
		<view class="fixed bg-white solid-bottom flex align-center justify-between padding-lr-32"
			:style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
			<view class="action" @tap="back">
				<text class="cuIcon-back font-36"></text>
			</view>
			<view class="content" :style="[{top:StatusBar+'px'}]">
				<view class="flex align-center justify-center">
					<text class="margin-right-10 font-36 text-333 text-bold">金币明细</text>
					<image :src="imgBaseUrl + '027.png'" class="width-33 height-32" @click="showCalendar" />
				</view>
			</view>
			<view style="width: 36rpx;"></view>
		</view>
	</view>
    <!-- 标题栏  end -->
    <view class="bg-white flex nav-tab" :style="{'top': CustomBar+'px'}">
      <view v-for="(item, index) in navList" :key="index" class="flex-sub text-center padding-tb-25 fu-fs32 "
        :class="{ 'text-bold active': tabCurrentIndex === index }" @click="tabClick(index)">
        {{ item.text || '' }}
        <view class="active-line"></view>
      </view>
    </view>
    <!-- 导航栏 end -->
    <!-- 订单列表 start -->
    <view class="bg-white padding-lr margin-top-sm">
      <block v-for="(item, index) in listData" :key="index">
        <view class="padding-tb solid-bottom flex align-stretch detail-item">
          <view class="flex-sub" style="min-width: 1px;">
            <view class="text-cut-2 text-333 fu-fs28">{{ item.remark }}</view>
            <view class="fu-fs24 text-999 margin-top-sm">{{ item.create_time }}</view>
          </view>
          <view class="flex flex-direction justify-center">
            <text v-if="item.after_money - item.before_money > 0" class="fu-fs28 text-bold" style="color: #FA2033;">+{{ item.change_money }}</text>
            <text v-else class="text-333 fu-fs28 text-bold">{{ item.change_money }}</text>
            <!-- <view v-if="item.t==1" class="text-vecode fu-fs24 text-right" @tap="toDetail(item)">详情 ></view> -->
          </view>
        </view>
      </block>
    </view>
    <!-- 订单列表 end -->
    <!-- 日历弹框 start -->
    <fu-popup v-model="isCalendar" mode="center" :mask-close-able="true" @close="closePopup">
      <view class="bg-white radius-16 width-640 padding-lr-sm">
        <fu-calendar @change="change" active-bg-color="#FF6F27" range-bg-color="#FFE1D3" :future="true" start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data" :end-time="end_data"></fu-calendar>
      </view>
    </fu-popup>
    <!-- 日历弹框 end -->
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  export default {
    mixins: [pagingList],
    data() {
      return {
        minixPagingListsApi: global.apiUrls.getMoneyDetail, //明细请求地址
        pageingListApiMethod: "post", //请求方法
        // TODO: 接口未对接 对接后将false改为true
        allowOnloadGetList: true, // 是否允许页面onload生命周期进入后立马执行getlist
        tabCurrentIndex: 0, //顶部导航 选择的第几个
        isCalendar:false,//日历弹窗
        start_data: '', //开始日期
        end_data: '', //结束日期
        type: 0, //请求的订单类别
        navList: [
          {
            text: global.i18n['全部'],
            type: 0
          },
          {
            text: global.i18n['收入记录'],
            type: 3
          },
          {
            text: global.i18n['支出记录'],
            type: 4
          }
        ], //冻结顶部导航
      };
    },
    methods: {
		back() {
			uni.navigateBack()
		},
		// 结算详情
		toDetail(item) {
			this.$urouter.navigateTo({
				url: '/pages/wallet/settlement-detail/index',
				params: {
					items: JSON.stringify(item)
				}
			});
		},
      /**
       * @description  显示日历
       */
      showCalendar() {
        this.isCalendar = true;
      },
      /**
       * @description  隐藏日历
       */
      closePopup() {
        this.isCalendar = false;
      },
      /**
       * @description  获取列表
       * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
       */
      change(value) {
        console.log(value)
        if (value.isInit) return;
        this.start_data = value.start;
        this.end_data = value.end;
        setTimeout(() =>{
          this.isCalendar = false;
        },800)
        this.pagingListToggle();
      },
      // ok
      tabClick(index) {
        this.tabCurrentIndex = index;
        this.type = this.navList[index].type;
        this.pagingListToggle();
      },
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          pagesize: 10,
          change_type: this.type,
          start_data: this.start_data,
          end_data: this.end_data,
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
.fixed {
	position: fixed;
	top: 0;
	width: 100%;
}
.active {
	color: #333;
	position: relative;
	.active-line {
		position: absolute;
		bottom: 0px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 50rpx;
		height: 4rpx;
		background: #FF6F27;
		border-radius: 10rpx;
	}
}
.cu-custom {
	z-index: 999;
}
</style>
